<template>
  <van-nav-bar
    title="注册"
    left-arrow
    @click-left="onClickLeft"
    :border="false"
  />
  <div class="RegItem">
    <van-cell-group inset>
      <!-- 输入手机号，调起手机号键盘 -->
      <van-field v-model="tel" type="tel" label="手机号" placeholder="手机号" />
      <!-- 允许输入数字，调起带符号的纯数字键盘 -->
      <van-field
        v-model="sms"
        center
        clearable
        label="短信验证码"
        placeholder="请输入短信验证码"
      >
        <template #button>
          <van-button @click="huo_qu" size="small" type="primary">发送验证码</van-button>
        </template>
      </van-field>
      <!-- 输入密码 -->
      <van-field v-model="password" type="password" label="密码" />
    </van-cell-group>
    <div class="kong"></div>
    <van-button @click="denglu" type="primary" color="gainsboro" size="large" round
      >注册</van-button>
      <p class="fontP">已有帐号，去
        <span @click="login" style ="color: red;">登录</span>
        </p>
  </div>
</template>
<script setup lang="ts">
import Product from "@/api/main";
import { onMounted, ref } from "vue";
import {useRouter,useRoute} from 'vue-router'
  const router = useRouter()
  const route = useRoute()
  const _product = new Product()
  onMounted(() => {
    _product.abc().then(res => {
       console.log(res)
    })
});
const onClickLeft = () => history.back();
const tel = ref("");
const text = ref("");
const digit = ref("");
const number = ref("");
const password = ref("");
const sms = ref("");
function login() {
  router.push(
      {
         name:'login', 
      }
    )
}
function denglu() {
  router.push(
      {
         name:'my', 
      }
    )
}
function huo_qu() {
 _product.getPhoneCode({
  phoneNumber:route.query.phoneNumber
 }).then((res)=>{
  console.log("1234");
  console.log('res.data');
  let reg_arr = res.data
 })
}


</script>
<style scoped>
.RegItem {
  width: 80%;
  margin: 0 auto;
}
.kong {
  height: 30px;
}
.fontP{
    color: gray;
    font-size: 10px;
    margin-top: 10px;
}
</style>



<style >
.van-icon-arrow-left:before {
  color: gray;
}
</style>